import $ from 'jquery';
import * as joint from 'jointjs';
import Element from './element';
import * as cc from '../util/constants';
import svgStr from '../svg/index';

/**
 * 输入节点
 */
const JointInput = (joint.shapes.basic.Input =
  joint.shapes.basic.Generic.extend({
    markup: svgStr,
    defaults: joint.util.deepSupplement(
      {
        type: 'basic.Input',
        attrs: {
          size: {
            width: cc.ELEMENT_WIDTH,
            height: cc.ELEMENT_HEIGHT,
          },
          '.database-stroke': {},
          '.database-shadow': {},
          '.spreadsheet-stroke': {},
          '.spreadsheet-shadow': {},
          '.index-stroke': {},
          '.index-shadow': {},
        },
      },
      joint.shapes.basic.Generic.prototype.defaults
    ),
  }));

class Input extends Element {
  constructor(...args) {
    super(...args);
    this._jointInstance = new JointInput(this.jointAttrs);
  }

  mixinAttr() {
    this.model.taskArgs = this.model.taskArgs || {};
    this.model.taskArgs.dataSetType = this.model.taskArgs.dataSetType || 1;
    let mixin = {
      attrs: {
        '.fill': {
          fill: 'none',
        },
        '.shadow': {
          opacity: 0.3,
        },
      },
    };
    $.extend(this.jointAttrs, mixin);
  }

  createText(...args) {
    super.createText(...args);
    // this.$text.addClass('text-right')
  }

  createMask(...args) {
    super.createMask(...args);
    this.$mask.addClass('input-element');
  }

  bindEvent() {
    super.bindEvent();

    this.$mask.on('drop', '.drag-action .replace-action', event => {
      if (!this.equals(this.parent.draggingElement)) {
        // 回调事件
        this.parent.trigger('replace_input', [[this]]);
      }
      this.showDropActionMenu = false;
    });
  }

  /**
   * 根据输入源类型填充图形和颜色
   * @param {String} type
   * @param {String} color
   */
  createAttrByTypeAndColor(from, type, colorIndex) {
    from = from ==='dataSource'?'dataSource': 'mySource';
    type = type === 16 ? 'index' : type === 1?'spreadsheet': 'indexView';
    let color = this.getColorFromIndex(colorIndex);
    let attr = {};
    attr['.fill'] = {
      fill: 'none',
    };
    attr[`.${type}-${from}-stroke`] = {
      fill: color,
    };
    attr[`.${type}-${from}-shadow`] = {
      fill: color,
    };
    return attr;
  }

  setColor(colorIndex) {
    super.setColor(colorIndex);
    this.jointInstance.attr(
      this.createAttrByTypeAndColor(
        this.model.taskArgs.dataSetFrom,
        this.model.taskArgs.dataSetType,
        this.model.color
      )
    );
  }

  set showDropActionMenu(flag) {
    if (this._showDropActionMenu === flag) {
      return;
    }
    this._showDropActionMenu = flag;
    if (flag) {
      if (this.$mask.find('.drag-action').length == 0) {
        let menu = '<div class="drag-action">';
        if (!this.parent.draggingElement) {
          let replaceHtml = !this.hasError
            ? '<div class="action replace-action">替换</div>'
            : '';
          menu = '<div class="drag-action">' + replaceHtml + '</div>';
        } else {
          let dragError = this.parent.draggingElement.hasError;
          let joinHtml =
            !this.hasError && !dragError
              ? '<div class="action join-action">关联</div>'
              : '';
          let unionHtml =
            !this.hasError && !dragError
              ? '<div class="action union-action">并集</div>'
              : '';
          menu = '<div class="drag-action">' + joinHtml + unionHtml + '</div>';
        }
        this.$mask.append(menu);
        this.$text.addClass('hide');
      }
    } else {
      this.$mask.find('.drag-action').remove();
      this.$text.removeClass('hide');
    }
  }

  createText() {
    super.createText();
    this.$text.find('.text').addClass('readonly');
  }
}

export default Input;
